<template>
  <div class="exam-detail">
    <!-- 考试头部信息 -->
    <div class="exam-header">
      <div class="header-content">
        <div class="exam-info">
          <div class="breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/exam' }">在线考试</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/exam/list' }">考试列表</el-breadcrumb-item>
              <el-breadcrumb-item>{{ exam.title }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="exam-main-info">
            <div class="exam-left">
              <div class="exam-category">{{ exam.category }}</div>
              <h1 class="exam-title">{{ exam.title }}</h1>
              <p class="exam-subtitle">{{ exam.subtitle }}</p>

              <div class="exam-meta">
                <div class="meta-item">
                  <el-icon><Clock /></el-icon>
                  <span>{{ exam.duration }}分钟</span>
                </div>
                <div class="meta-item">
                  <el-icon><Document /></el-icon>
                  <span>{{ exam.questionCount }}题</span>
                </div>
                <div class="meta-item">
                  <el-icon><Trophy /></el-icon>
                  <span>及格{{ exam.passingScore }}分</span>
                </div>
                <div class="meta-item">
                  <el-icon><User /></el-icon>
                  <span>{{ exam.participants }}人参加</span>
                </div>
                <div class="meta-item">
                  <el-icon><Star /></el-icon>
                  <span>{{ exam.rating }}分</span>
                </div>
              </div>

              <div class="exam-tags">
                <el-tag :type="getDifficultyType(exam.difficulty)" size="large">
                  {{ exam.difficulty }}
                </el-tag>
                <el-tag v-if="exam.isNew" type="warning" size="large">新考试</el-tag>
                <el-tag v-if="exam.isHot" type="danger" size="large">热门</el-tag>
                <el-tag v-if="exam.isCertified" type="success" size="large">认证考试</el-tag>
              </div>
            </div>

            <div class="exam-right">
              <div class="exam-card">
                <div class="exam-status">
                  <el-tag
                    :type="getStatusType(exam.status)"
                    size="large"
                  >
                    {{ getStatusText(exam.status) }}
                  </el-tag>
                </div>

                <div class="exam-deadline" v-if="exam.deadline">
                  <div class="deadline-label">截止时间</div>
                  <div class="deadline-date">{{ formatDate(exam.deadline) }}</div>
                  <div class="deadline-countdown">{{ getCountdown(exam.deadline) }}</div>
                </div>

                <div class="exam-progress" v-if="exam.userProgress">
                  <div class="progress-title">我的成绩</div>
                  <div class="progress-score">
                    <span class="score">{{ exam.userProgress.bestScore }}</span>
                    <span class="total">/ 100分</span>
                  </div>
                  <div class="progress-attempts">
                    已参加 {{ exam.userProgress.attempts }} 次
                  </div>
                </div>

                <div class="exam-actions">
                  <el-button
                    type="primary"
                    size="large"
                    @click="startExam"
                    :disabled="exam.status === 'expired'"
                    :loading="starting"
                  >
                    {{ getActionText() }}
                  </el-button>

                  <div class="action-buttons">
                    <el-button @click="toggleFavorite" :type="exam.isFavorited ? 'primary' : ''">
                      <el-icon><Star /></el-icon>
                      {{ exam.isFavorited ? '已收藏' : '收藏' }}
                    </el-button>
                    <el-button @click="shareExam">
                      <el-icon><Share /></el-icon>
                      分享
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 考试详情内容 -->
    <div class="exam-content">
      <div class="content-container">
        <div class="main-content">
          <el-tabs v-model="activeTab" class="exam-tabs">
            <!-- 考试介绍 -->
            <el-tab-pane label="考试介绍" name="introduction">
              <div class="introduction-content">
                <section class="exam-description">
                  <h3>考试简介</h3>
                  <div class="description-text" v-html="exam.description"></div>
                </section>

                <section class="exam-objectives">
                  <h3>考试目标</h3>
                  <ul class="objectives-list">
                    <li v-for="objective in exam.objectives" :key="objective">
                      <el-icon><Check /></el-icon>
                      <span>{{ objective }}</span>
                    </li>
                  </ul>
                </section>

                <section class="exam-requirements">
                  <h3>参考要求</h3>
                  <div class="requirements-grid">
                    <div class="requirement-item">
                      <div class="requirement-label">前置知识</div>
                      <div class="requirement-value">{{ exam.prerequisites.join('、') }}</div>
                    </div>
                    <div class="requirement-item">
                      <div class="requirement-label">适合人群</div>
                      <div class="requirement-value">{{ exam.targetAudience.join('、') }}</div>
                    </div>
                    <div class="requirement-item">
                      <div class="requirement-label">考试形式</div>
                      <div class="requirement-value">{{ exam.format }}</div>
                    </div>
                    <div class="requirement-item">
                      <div class="requirement-label">题目类型</div>
                      <div class="requirement-value">{{ exam.questionTypes.join('、') }}</div>
                    </div>
                  </div>
                </section>
              </div>
            </el-tab-pane>

            <!-- 考试大纲 -->
            <el-tab-pane label="考试大纲" name="outline">
              <div class="outline-content">
                <div class="outline-summary">
                  <div class="summary-item">
                    <span class="label">总题数：</span>
                    <span class="value">{{ exam.questionCount }}题</span>
                  </div>
                  <div class="summary-item">
                    <span class="label">考试时长：</span>
                    <span class="value">{{ exam.duration }}分钟</span>
                  </div>
                  <div class="summary-item">
                    <span class="label">及格分数：</span>
                    <span class="value">{{ exam.passingScore }}分</span>
                  </div>
                </div>

                <div class="outline-sections">
                  <div
                    v-for="(section, index) in exam.outline"
                    :key="section.id"
                    class="outline-section"
                  >
                    <div class="section-header">
                      <div class="section-title">
                        第{{ index + 1 }}部分：{{ section.title }}
                      </div>
                      <div class="section-meta">
                        <span class="question-count">{{ section.questionCount }}题</span>
                        <span class="score-weight">{{ section.scoreWeight }}%</span>
                      </div>
                    </div>

                    <div class="section-content">
                      <div class="section-description">{{ section.description }}</div>
                      <div class="section-topics">
                        <div class="topics-title">考查要点：</div>
                        <ul class="topics-list">
                          <li v-for="topic in section.topics" :key="topic">{{ topic }}</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <!-- 历史记录 -->
            <el-tab-pane label="历史记录" name="history">
              <div class="history-content">
                <div v-if="examHistory.length === 0" class="no-history">
                  <EmptyState
                    image="/images/empty-history.svg"
                    title="暂无考试记录"
                    description="你还没有参加过这个考试"
                  />
                </div>

                <div v-else class="history-list">
                  <div
                    v-for="record in examHistory"
                    :key="record.id"
                    class="history-item"
                  >
                    <div class="history-header">
                      <div class="attempt-info">
                        <div class="attempt-number">第{{ record.attemptNumber }}次考试</div>
                        <div class="attempt-date">{{ formatDateTime(record.completedAt) }}</div>
                      </div>
                      <div class="attempt-score">
                        <div class="score" :class="getScoreClass(record.score)">
                          {{ record.score }}分
                        </div>
                        <div class="status">
                          <el-tag :type="record.passed ? 'success' : 'danger'" size="small">
                            {{ record.passed ? '通过' : '未通过' }}
                          </el-tag>
                        </div>
                      </div>
                    </div>

                    <div class="history-details">
                      <div class="detail-item">
                        <span class="label">用时：</span>
                        <span class="value">{{ record.duration }}</span>
                      </div>
                      <div class="detail-item">
                        <span class="label">正确率：</span>
                        <span class="value">{{ record.accuracy }}%</span>
                      </div>
                      <div class="detail-item">
                        <span class="label">排名：</span>
                        <span class="value">{{ record.ranking }}</span>
                      </div>
                    </div>

                    <div class="history-actions">
                      <el-button size="small" @click="viewResult(record)">
                        查看详情
                      </el-button>
                      <el-button size="small" @click="downloadCertificate(record)" v-if="record.passed">
                        下载证书
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 侧边栏 -->
        <div class="sidebar">
          <!-- 相关考试 -->
          <div class="related-exams">
            <h3>相关考试</h3>
            <div class="related-list">
              <div
                v-for="relatedExam in relatedExams"
                :key="relatedExam.id"
                class="related-item"
                @click="viewExam(relatedExam)"
              >
                <div class="related-info">
                  <div class="related-title">{{ relatedExam.title }}</div>
                  <div class="related-meta">
                    <span class="difficulty">{{ relatedExam.difficulty }}</span>
                    <span class="participants">{{ relatedExam.participants }}人</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 考试统计 -->
          <div class="exam-stats">
            <h3>考试统计</h3>
            <div class="stats-list">
              <div class="stat-item">
                <div class="stat-label">参考人数</div>
                <div class="stat-value">{{ exam.participants }}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">通过率</div>
                <div class="stat-value">{{ exam.passRate }}%</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">平均分</div>
                <div class="stat-value">{{ exam.averageScore }}分</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">最高分</div>
                <div class="stat-value">{{ exam.highestScore }}分</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  Clock, Document, Trophy, User, Star, Share, Check
} from '@element-plus/icons-vue'
import EmptyState from '@/components/global/EmptyState.vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

// 响应式数据
const activeTab = ref('introduction')
const starting = ref(false)

// 模拟考试数据
const exam = ref({
  id: 1,
  title: 'JavaScript基础能力测试',
  subtitle: '全面测试JavaScript核心知识和实际应用能力',
  category: '前端开发',
  difficulty: '初级',
  duration: 60,
  questionCount: 50,
  participants: 1250,
  rating: 4.8,
  passingScore: 60,
  deadline: new Date('2024-12-31'),
  status: 'available',
  isNew: false,
  isHot: true,
  isCertified: true,
  isFavorited: false,
  format: '在线答题',
  passRate: 78,
  averageScore: 72,
  highestScore: 98,
  description: `
    <p>本考试旨在全面评估考生的JavaScript基础知识和实际编程能力。</p>
    <p>涵盖语法基础、DOM操作、异步编程、ES6+新特性等核心内容。</p>
  `,
  objectives: [
    '掌握JavaScript基础语法和数据类型',
    '理解函数、作用域和闭包概念',
    '熟练使用DOM API进行页面操作',
    '掌握异步编程和Promise使用',
    '了解ES6+新特性和模块化'
  ],
  prerequisites: ['HTML基础', 'CSS基础', '编程思维'],
  targetAudience: ['前端开发初学者', '计算机专业学生', '转行学习者'],
  questionTypes: ['单选题', '多选题', '判断题', '编程题'],
  outline: [
    {
      id: 1,
      title: '基础语法',
      questionCount: 15,
      scoreWeight: 30,
      description: '测试JavaScript基础语法知识',
      topics: ['变量声明', '数据类型', '运算符', '控制结构']
    },
    {
      id: 2,
      title: '函数与对象',
      questionCount: 20,
      scoreWeight: 40,
      description: '测试函数和面向对象编程',
      topics: ['函数定义', '作用域', '原型链', '类与继承']
    },
    {
      id: 3,
      title: 'DOM与事件',
      questionCount: 10,
      scoreWeight: 20,
      description: '测试DOM操作和事件处理',
      topics: ['DOM选择器', '事件绑定', '事件冒泡', '表单处理']
    },
    {
      id: 4,
      title: '异步编程',
      questionCount: 5,
      scoreWeight: 10,
      description: '测试异步编程相关知识',
      topics: ['Promise', 'async/await', '定时器', 'AJAX']
    }
  ],
  userProgress: {
    bestScore: 85,
    attempts: 2
  }
})

const examHistory = ref([
  {
    id: 1,
    attemptNumber: 2,
    score: 85,
    passed: true,
    duration: '45分钟',
    accuracy: 85,
    ranking: '前20%',
    completedAt: new Date('2024-01-15')
  },
  {
    id: 2,
    attemptNumber: 1,
    score: 72,
    passed: true,
    duration: '52分钟',
    accuracy: 72,
    ranking: '前40%',
    completedAt: new Date('2024-01-10')
  }
])

const relatedExams = ref([
  {
    id: 2,
    title: 'Vue.js框架认证考试',
    difficulty: '中级',
    participants: 890
  },
  {
    id: 3,
    title: 'HTML5与CSS3测试',
    difficulty: '初级',
    participants: 1560
  }
])

// 计算属性
const getCountdown = (deadline) => {
  const now = new Date()
  const diff = deadline - now
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days > 0) {
    return `还有${days}天`
  } else if (days === 0) {
    return '今天截止'
  } else {
    return '已截止'
  }
}

// 方法
const getDifficultyType = (difficulty) => {
  const types = {
    '初级': 'success',
    '中级': 'warning',
    '高级': 'danger'
  }
  return types[difficulty] || 'info'
}

const getStatusType = (status) => {
  const types = {
    'available': 'success',
    'taken': 'info',
    'expired': 'danger'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    'available': '可参加',
    'taken': '已参加',
    'expired': '已过期'
  }
  return texts[status] || '未知'
}

const getActionText = () => {
  if (exam.value.status === 'expired') return '已过期'
  if (exam.value.userProgress) return '重新考试'
  return '开始考试'
}

const getScoreClass = (score) => {
  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 60) return 'pass'
  return 'fail'
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

const formatDateTime = (date) => {
  return new Date(date).toLocaleString('zh-CN')
}

const startExam = async () => {
  if (exam.value.status === 'expired') {
    ElMessage.warning('考试已过期')
    return
  }

  starting.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    ElMessage.success('正在进入考试...')
    router.push(`/exam/take/${exam.value.id}`)
  } catch (error) {
    ElMessage.error('进入考试失败，请重试')
  } finally {
    starting.value = false
  }
}

const toggleFavorite = () => {
  exam.value.isFavorited = !exam.value.isFavorited
  ElMessage.success(exam.value.isFavorited ? '已收藏' : '已取消收藏')
}

const shareExam = () => {
  ElMessage.success('分享链接已复制到剪贴板')
}

const viewResult = (record) => {
  router.push(`/exam/result/${record.id}`)
}

const downloadCertificate = (record) => {
  ElMessage.success('正在下载证书...')
}

const viewExam = (relatedExam) => {
  router.push(`/exam/detail/${relatedExam.id}`)
}

onMounted(() => {
  // 根据路由参数加载考试数据
  const examId = route.params.id
  if (examId) {
    // 加载考试详情数据
  }
})
</script>

<style lang="scss" scoped>
.exam-detail {
  min-height: 100vh;
  background: var(--el-bg-color-page);
}

.exam-header {
  background: white;
  border-bottom: 1px solid var(--el-border-color-extra-light);
  padding: 20px 0 40px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.exam-main-info {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 40px;

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.exam-category {
  display: inline-block;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 12px;
}

.exam-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  margin-bottom: 12px;
  line-height: 1.2;

  @media (max-width: 768px) {
    font-size: 24px;
  }
}

.exam-subtitle {
  font-size: 16px;
  color: var(--el-text-color-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}

.exam-meta {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    gap: 16px;
  }
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--el-text-color-regular);

  .el-icon {
    color: var(--el-color-primary);
  }
}

.exam-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.exam-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 20px;
}

.exam-status {
  text-align: center;
  margin-bottom: 20px;
}

.exam-deadline {
  text-align: center;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--el-fill-color-extra-light);
  border-radius: 8px;

  .deadline-label {
    font-size: 12px;
    color: var(--el-text-color-secondary);
    margin-bottom: 4px;
  }

  .deadline-date {
    font-size: 16px;
    font-weight: 500;
    color: var(--el-text-color-primary);
    margin-bottom: 4px;
  }

  .deadline-countdown {
    font-size: 12px;
    color: var(--el-color-warning);
  }
}

.exam-progress {
  text-align: center;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--el-color-primary-light-9);
  border-radius: 8px;

  .progress-title {
    font-size: 12px;
    color: var(--el-text-color-secondary);
    margin-bottom: 8px;
  }

  .progress-score {
    margin-bottom: 4px;

    .score {
      font-size: 24px;
      font-weight: 700;
      color: var(--el-color-primary);
    }

    .total {
      font-size: 14px;
      color: var(--el-text-color-secondary);
    }
  }

  .progress-attempts {
    font-size: 12px;
    color: var(--el-text-color-placeholder);
  }
}

.exam-actions {
  .el-button {
    width: 100%;
    margin-bottom: 12px;
  }

  .action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    .el-button {
      margin-bottom: 0;
    }
  }
}

.exam-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.content-container {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
}

.exam-tabs {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.introduction-content {
  section {
    margin-bottom: 32px;

    h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      color: var(--el-text-color-primary);
    }
  }
}

.description-text {
  line-height: 1.6;
  color: var(--el-text-color-regular);
}

.objectives-list {
  list-style: none;
  padding: 0;

  li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;

    .el-icon {
      color: var(--el-color-success);
      flex-shrink: 0;
    }
  }
}

.requirements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.requirement-item {
  padding: 16px;
  background: var(--el-fill-color-extra-light);
  border-radius: 8px;

  .requirement-label {
    font-size: 12px;
    color: var(--el-text-color-secondary);
    margin-bottom: 4px;
  }

  .requirement-value {
    font-size: 14px;
    color: var(--el-text-color-primary);
    font-weight: 500;
  }
}

.outline-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--el-fill-color-extra-light);
  border-radius: 8px;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 8px;
  }
}

.summary-item {
  .label {
    color: var(--el-text-color-secondary);
    margin-right: 4px;
  }

  .value {
    font-weight: 500;
    color: var(--el-text-color-primary);
  }
}

.outline-sections {
  .outline-section {
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--el-fill-color-extra-light);

  .section-title {
    font-weight: 500;
    color: var(--el-text-color-primary);
  }

  .section-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--el-text-color-placeholder);
  }
}

.section-content {
  padding: 16px;

  .section-description {
    margin-bottom: 12px;
    color: var(--el-text-color-secondary);
  }

  .topics-title {
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--el-text-color-primary);
  }

  .topics-list {
    list-style: disc;
    padding-left: 20px;

    li {
      margin-bottom: 4px;
      color: var(--el-text-color-regular);
    }
  }
}

.history-content {
  .no-history {
    text-align: center;
    padding: 40px 20px;
  }
}

.history-list {
  .history-item {
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
  }
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.attempt-info {
  .attempt-number {
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--el-text-color-primary);
  }

  .attempt-date {
    font-size: 12px;
    color: var(--el-text-color-placeholder);
  }
}

.attempt-score {
  text-align: right;

  .score {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;

    &.excellent {
      color: var(--el-color-success);
    }

    &.good {
      color: var(--el-color-primary);
    }

    &.pass {
      color: var(--el-color-warning);
    }

    &.fail {
      color: var(--el-color-danger);
    }
  }
}

.history-details {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;

  .detail-item {
    .label {
      font-size: 12px;
      color: var(--el-text-color-secondary);
    }

    .value {
      font-weight: 500;
      color: var(--el-text-color-primary);
    }
  }
}

.history-actions {
  display: flex;
  gap: 8px;
}

.sidebar {
  .related-exams,
  .exam-stats {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;

    h3 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
      color: var(--el-text-color-primary);
    }
  }
}

.related-list {
  .related-item {
    padding: 12px;
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 6px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      border-color: var(--el-color-primary);
      background: var(--el-fill-color-extra-light);
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.related-info {
  .related-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--el-text-color-primary);
    @include text-ellipsis(2);
  }

  .related-meta {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--el-text-color-placeholder);
  }
}

.stats-list {
  .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--el-border-color-extra-light);

    &:last-child {
      border-bottom: none;
    }

    .stat-label {
      font-size: 14px;
      color: var(--el-text-color-secondary);
    }

    .stat-value {
      font-weight: 500;
      color: var(--el-text-color-primary);
    }
  }
}

@media (max-width: 768px) {
  .exam-main-info {
    grid-template-columns: 1fr;
  }

  .content-container {
    grid-template-columns: 1fr;
  }

  .history-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .attempt-score {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .history-details {
    flex-direction: column;
    gap: 8px;
  }
}
</style>